{% extends "base.html" %}
{% load i18n %}

{% block htmlhead %}
{{block.super}}
<style type="text/css" media="screen">
.selected {
   background-color: #CCCCCC;
}
#filelist ul{
   list-style: none;
   margin: 0px;
   padding: 0px;
}
#filelist {
   position: absolute;
	background-color: white;
   padding: 5px;
   top: 40px;
   margin: 0px;
        /*width: 800px;*/
        /*line-height: 200%;*/
        /*margin-right: 100px;*/
   border: 1px solid #ccc;
/*	width: 90%; */
/*   width: 100px; */
    margin-left: 10px;
    line-height: 2em;
}

#anon1 {
	margin-left: auto;
	margin-right: auto;
}

#reportlist{
   position: absolute;
   padding: 5px;
   border: 1px solid #ccc;
   background-color: white;
   position:absolute;
   margin-left: 200px;
   top: 40px;
   width: 800px;
}
</style>



<script language="javascript" type="text/javascript">
function submitCRFForm(action){
document.crfform.crf.value = action
document.crfform.submit();
}
</script>

<script type="text/javascript">
function submitform()
{
  document.myform.submit();
}

function submitwritetrain()
{
   var input = document.createElement("input");
   input.setAttribute("type", "hidden");
   input.setAttribute("name", "writetodisk");
   input.setAttribute("value", "1");
   document.myform.appendChild(input);
  document.myform.submit();
}
</script>


 
<script src="/site_media/js/jquery.js" type="text/javascript"></script>
<script src="/site_media/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="/site_media/js/jquery.jqGrid.min.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" media="screen" href="/site_media/css/ui-lightness/jquery-ui-1.7.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/site_media/css/ui.jqgrid.css" />


<script type="text/javascript">
jQuery(document).ready(function(){ 

jQuery("#anon1").jqGrid({
                        datatype: "local", 
                        height: 'auto', 
                        colNames:['Title', 'Tags', 'Labels'], 
                        colModel:[ 
                                        {name:'title',index:'title', width: '75px'}, 
                                        {name:'tags',index:'tags', width: '100px'}, 
                                        {name:'labels',index:'labels'}, 
					
                                ], 
			autowidth: true,
                        caption: "{{count}} Objects for training and/or labeling",
                        });

var mydata = [{% for key,object in objects.items %}
        {title:"<a href=\"/hide/doc/{{key}}\">{{object.value.title}}</a>" , labels:"{{object.value.labels}}", tags:"{{object.value.tags}}"},
{% endfor %}];

for(var i=0;i<=mydata.length;i++) {
	jQuery("#anon1").jqGrid('addRowData',i+1,mydata[i]);
}

});
					


</script>

{% endblock %}

{% block title %}
HIDE: Label Documents
{% endblock %}



{% block content %}

<div id="taskbar">
<ul class="dropdown">
<li class="dir"><a href="/hide/autolabelset/{{tag}}">Label</a> 
<!-- insert crf list here
-->
<ul class="smaller">
<li>Select a model to perform automatic labeling:</li>
<form name="crfform" action="/hide/autolabelset/{{tag}}" method="POST">
{% csrf_token %}
<input type="hidden" name="crf"/>
{% for crf in models %}
<li><a href="javascript:submitCRFForm('{{crf}}');">{{ crf }}</a></li>
{% endfor %}
</form>
</ul>
</li>
<li><a href="javascript: submitform()">Train</a>
<ul class="smaller">
<li><a href="javascript: submitform()">Train a classifier to automatically detect the highlighted text</a></li>
<li><a href="javascript: submitwritetrain()">Save training set to disk (advanced)</a></li>
</ul>
</li>
<li><a href="/hide/deidentifyset/{{tag}}">De-Identify</a>
<ul class="smaller">
<li><a href="/hide/deidentifyset/{{tag}}">De-identify the currently selected set by replacing the highlighted text</a></li>
</ul>
</li>
<li><a href="/hide/analysis/{{tag}}">Analyze</a>
<ul class="smaller">
<li><a href="/hide/analysis/{{tag}}">Analyze the currently selected set using k-fold cross-validation (advanced)</a></li>
</ul>
</li>
<li><a href="http://mathcs.emory.edu/hide/doc/">  Help  </a>
<ul class="smaller">
<li><a href="http://mathcs.emory.edu/hide/doc/">Go to help page (internet)</a></li>
</ul>
</li>
</ul>
</div>

<div id="filelist">
<ul>
  {% for t in tags %} 
  {% if t == tag %}
  <li><a class="selected" href="/hide/{{path}}/{{t}}">{{ t }}</a></li>
  {% else %}
  <li><a href="/hide/{{path}}/{{t}}">{{ t }}</a></li>
  {% endif %}
  {% endfor %}
</ul>
</div>

{% comment %}
<h1>HIDE</h1>
{% endcomment %}
<div id="reportlist">
{% if message %}
<h2>{{message}}</h2>
{% else %}
<form name="myform" method="post" action="#">
{% csrf_token %}
{% comment %}
<a href="javascript: submitform()">Train AutoLabeler</a> <br/>
<a href="javascript: submitwritetrain()">Write Set to Disk</a> 
{% endcomment %}
</form>

{{tag}}
<table id="anon1"></table>
{% endif %}
  
  
</div>
{% endblock %}

